<template>
  <div>

    <div class="prewrap" v-highlight>
      <!-- 使用指令 -->
      <pre>
          <code class="css">

             /** */ 容器内占位符样式

              .bg-purple {
                background: #d3dce6;
              }
              .bg-purple-light {
                background: #e5e9f2;
              }
              .grid-content {
                border-radius: 4px;
                min-height: 36px;
              }
            
          </code>
      </pre>
    </div>

    <sky-card-panel title="格栅布局">
      <div slot="main">

        <sky-layout-row>
          <sky-layout-col :span="24">
            <div class="grid-content bg-purple-light"></div>
          </sky-layout-col>
        </sky-layout-row>

        <sky-layout-row>
          <sky-layout-col :span="12">
            <div class="grid-content bg-purple-light"></div>
          </sky-layout-col>
          <sky-layout-col :span="12">
            <div class="grid-content bg-purple"></div>
          </sky-layout-col>
        </sky-layout-row>

        <sky-layout-row>
          <sky-layout-col :span="6">
            <div class="grid-content bg-purple-light"></div>
          </sky-layout-col>
          <sky-layout-col :span="6">
            <div class="grid-content bg-purple"></div>
          </sky-layout-col>
          <sky-layout-col :span="6">
            <div class="grid-content bg-purple-light"></div>
          </sky-layout-col>
          <sky-layout-col :span="6">
            <div class="grid-content bg-purple"></div>
          </sky-layout-col>
        </sky-layout-row>

        <sky-layout-row>
          <sky-layout-col :span="4">
            <div class="grid-content bg-purple-light"></div>
          </sky-layout-col>
          <sky-layout-col :span="4">
            <div class="grid-content bg-purple"></div>
          </sky-layout-col>
          <sky-layout-col :span="4">
            <div class="grid-content bg-purple-light"></div>
          </sky-layout-col>
          <sky-layout-col :span="4">
            <div class="grid-content bg-purple"></div>
          </sky-layout-col>
          <sky-layout-col :span="4">
            <div class="grid-content bg-purple-light"></div>
          </sky-layout-col>
          <sky-layout-col :span="4">
            <div class="grid-content bg-purple"></div>
          </sky-layout-col>
        </sky-layout-row>

      </div>
    </sky-card-panel>

    <SkyHiddenPanel title="代码">
      <div class="prewrap" v-highlight>

        <pre>
              <code class="html">
                //格栅布局
                
                  &lt;sky-layout-row&gt;
                    &lt;sky-layout-col :span="24"&gt;
                      &lt;div class="grid-content bg-purple-light"&gt;&lt;/div&gt;
                    &lt;/sky-layout-col&gt;
                  &lt;/sky-layout-row&gt;

                  &lt;sky-layout-row&gt;
                    &lt;sky-layout-col :span="12"&gt;
                      &lt;div class="grid-content bg-purple-light"&gt;&lt;/div&gt;
                    &lt;/sky-layout-col&gt;
                    &lt;sky-layout-col :span="12"&gt;
                      &lt;div class="grid-content bg-purple"&gt;&lt;/div&gt;
                    &lt;/sky-layout-col&gt;
                  &lt;/sky-layout-row&gt;

                  &lt;sky-layout-row&gt;
                    &lt;sky-layout-col :span="6"&gt;
                      &lt;div class="grid-content bg-purple-light"&gt;&lt;/div&gt;
                    &lt;/sky-layout-col&gt;
                    &lt;sky-layout-col :span="6"&gt;
                      &lt;div class="grid-content bg-purple"&gt;&lt;/div&gt;
                    &lt;/sky-layout-col&gt;
                    &lt;sky-layout-col :span="6"&gt;
                      &lt;div class="grid-content bg-purple-light"&gt;&lt;/div&gt;
                    &lt;/sky-layout-col&gt;
                    &lt;sky-layout-col :span="6"&gt;
                      &lt;div class="grid-content bg-purple"&gt;&lt;/div&gt;
                    &lt;/sky-layout-col&gt;
                  &lt;/sky-layout-row&gt;

                  &lt;sky-layout-row&gt;
                    &lt;sky-layout-col :span="4"&gt;
                      &lt;div class="grid-content bg-purple-light"&gt;&lt;/div&gt;
                    &lt;/sky-layout-col&gt;
                    &lt;sky-layout-col :span="4"&gt;
                      &lt;div class="grid-content bg-purple"&gt;&lt;/div&gt;
                    &lt;/sky-layout-col&gt;
                    &lt;sky-layout-col :span="4"&gt;
                      &lt;div class="grid-content bg-purple-light"&gt;&lt;/div&gt;
                    &lt;/sky-layout-col&gt;
                    &lt;sky-layout-col :span="4"&gt;
                      &lt;div class="grid-content bg-purple"&gt;&lt;/div&gt;
                    &lt;/sky-layout-col&gt;
                    &lt;sky-layout-col :span="4"&gt;
                      &lt;div class="grid-content bg-purple-light"&gt;&lt;/div&gt;
                    &lt;/sky-layout-col&gt;
                    &lt;sky-layout-col :span="4"&gt;
                      &lt;div class="grid-content bg-purple"&gt;&lt;/div&gt;
                    &lt;/sky-layout-col&gt;
                  &lt;/sky-layout-row&gt;
                              
              </code>
          </pre>
      </div>
    </SkyHiddenPanel>

    <sky-card-panel title="分栏间隔">
      <div slot="main">

        <sky-layout-row :gutter="20">
          <sky-layout-col :span="12">
            <div class="grid-content bg-purple-light"></div>
          </sky-layout-col>
          <sky-layout-col :span="12">
            <div class="grid-content bg-purple"></div>
          </sky-layout-col>
        </sky-layout-row>

        <sky-layout-row :gutter="20">
          <sky-layout-col :span="8">
            <div class="grid-content bg-purple-light"></div>
          </sky-layout-col>
          <sky-layout-col :span="16">
            <div class="grid-content bg-purple"></div>
          </sky-layout-col>
        </sky-layout-row>

        <sky-layout-row :gutter="20">
          <sky-layout-col :span="6">
            <div class="grid-content bg-purple-light"></div>
          </sky-layout-col>
          <sky-layout-col :span="6">
            <div class="grid-content bg-purple"></div>
          </sky-layout-col>
          <sky-layout-col :span="6">
            <div class="grid-content bg-purple-light"></div>
          </sky-layout-col>
          <sky-layout-col :span="6">
            <div class="grid-content bg-purple"></div>
          </sky-layout-col>
        </sky-layout-row>

      </div>
    </sky-card-panel>

    <SkyHiddenPanel title="代码">
      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="html">
              //分栏间隔
              
              &lt;sky-layout-row :gutter="20"&gt;
                &lt;sky-layout-col :span="12"&gt;
                  &lt;div class="grid-content bg-purple-light"&gt;&lt;/div&gt;
                &lt;/sky-layout-col&gt;
                &lt;sky-layout-col :span="12"&gt;
                  &lt;div class="grid-content bg-purple"&gt;&lt;/div&gt;
                &lt;/sky-layout-col&gt;
              &lt;/sky-layout-row&gt;

              &lt;sky-layout-row :gutter="20"&gt;
                &lt;sky-layout-col :span="8"&gt;
                  &lt;div class="grid-content bg-purple-light"&gt;&lt;/div&gt;
                &lt;/sky-layout-col&gt;
                &lt;sky-layout-col :span="16"&gt;
                  &lt;div class="grid-content bg-purple"&gt;&lt;/div&gt;
                &lt;/sky-layout-col&gt;
              &lt;/sky-layout-row&gt;

              &lt;sky-layout-row :gutter="20"&gt;
                &lt;sky-layout-col :span="6"&gt;
                  &lt;div class="grid-content bg-purple-light"&gt;&lt;/div&gt;
                &lt;/sky-layout-col&gt;
                &lt;sky-layout-col :span="6"&gt;
                  &lt;div class="grid-content bg-purple"&gt;&lt;/div&gt;
                &lt;/sky-layout-col&gt;
                &lt;sky-layout-col :span="6"&gt;
                  &lt;div class="grid-content bg-purple-light"&gt;&lt;/div&gt;
                &lt;/sky-layout-col&gt;
                &lt;sky-layout-col :span="6"&gt;
                  &lt;div class="grid-content bg-purple"&gt;&lt;/div&gt;
                &lt;/sky-layout-col&gt;
              &lt;/sky-layout-row&gt;
          </code>
      </pre>
      </div>
    </SkyHiddenPanel>

    <sky-card-panel title="分栏偏移">
      <div slot="main">

        <sky-layout-row>
          <sky-layout-col :span="6">
            <div class="grid-content bg-purple-light"></div>
          </sky-layout-col>
          <sky-layout-col :span="6" :offset="6">
            <div class="grid-content bg-purple"></div>
          </sky-layout-col>
        </sky-layout-row>

        <sky-layout-row>
          <sky-layout-col :span="6" :offset="6">
            <div class="grid-content bg-purple-light"></div>
          </sky-layout-col>
          <sky-layout-col :span="6" :offset="6">
            <div class="grid-content bg-purple"></div>
          </sky-layout-col>
        </sky-layout-row>

      </div>
    </sky-card-panel>

    <SkyHiddenPanel title="代码">
      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="html">
              //分栏偏移

              &lt;sky-layout-row&gt;
                &lt;sky-layout-col :span="6"&gt;
                  &lt;div class="grid-content bg-purple-light"&gt;&lt;/div&gt;
                &lt;/sky-layout-col&gt;
                &lt;sky-layout-col :span="6" :offset="6"&gt;
                  &lt;div class="grid-content bg-purple"&gt;&lt;/div&gt;
                &lt;/sky-layout-col&gt;
              &lt;/sky-layout-row&gt;

              &lt;sky-layout-row&gt;
                &lt;sky-layout-col :span="6" :offset="6"&gt;
                  &lt;div class="grid-content bg-purple-light"&gt;&lt;/div&gt;
                &lt;/sky-layout-col&gt;
                &lt;sky-layout-col :span="6" :offset="6"&gt;
                  &lt;div class="grid-content bg-purple"&gt;&lt;/div&gt;
                &lt;/sky-layout-col&gt;
              &lt;/sky-layout-row&gt;             

          </code>
      </pre>
      </div>
    </SkyHiddenPanel>

    <sky-card-panel title="自定义列宽">
      <div slot="main">

        <sky-layout-row>
          <sky-layout-col :width="100">
            <div class="grid-content bg-purple-light"></div>
          </sky-layout-col>
          <sky-layout-col :span="6">
            <div class="grid-content bg-purple"></div>
          </sky-layout-col>
        </sky-layout-row>

      </div>
    </sky-card-panel>

    <SkyHiddenPanel title="代码">
      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="html">
              //自定义列宽

              &lt;sky-layout-row&gt;
                &lt;sky-layout-col :width="100"&gt;
                  &lt;div class="grid-content bg-purple-light"&gt;&lt;/div&gt;
                &lt;/sky-layout-col&gt;
                &lt;sky-layout-col :span="6"&gt;
                  &lt;div class="grid-content bg-purple"&gt;&lt;/div&gt;
                &lt;/sky-layout-col&gt;
              &lt;/sky-layout-row&gt;           
        
          </code>
      </pre>
      </div>
    </SkyHiddenPanel>

    <sky-card-panel title="自定义左右偏移">
      <div slot="main">

        <sky-layout-row>
          <sky-layout-col :span="6" :marginLeft="50" :marginRight="100">
            <div class="grid-content bg-purple-light"></div>
          </sky-layout-col>
          <sky-layout-col :span="6">
            <div class="grid-content bg-purple"></div>
          </sky-layout-col>
        </sky-layout-row>

      </div>
    </sky-card-panel>

    <SkyHiddenPanel title="代码">
      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="html">
              //自定义左右偏移

              &lt;sky-layout-row&gt;
                &lt;sky-layout-col :span="6" :marginLeft="50" :marginRight="100"&gt;
                  &lt;div class="grid-content bg-purple-light"&gt;&lt;/div&gt;
                &lt;/sky-layout-col&gt;
                &lt;sky-layout-col :span="6"&gt;
                  &lt;div class="grid-content bg-purple"&gt;&lt;/div&gt;
                &lt;/sky-layout-col&gt;
              &lt;/sky-layout-row&gt;

          </code>
      </pre>
      </div>
    </SkyHiddenPanel>

    <sky-card-panel title="flex 布局">
      <div slot="main">

        <sky-layout-row type="flex">
          <sky-layout-col :span="6">
            <div class="grid-content bg-purple-light"></div>
          </sky-layout-col>
          <sky-layout-col :span="6">
            <div class="grid-content bg-purple"></div>
          </sky-layout-col>
        </sky-layout-row>

        <sky-layout-row type="flex" justify="center">
          <sky-layout-col :span="6">
            <div class="grid-content bg-purple-light"></div>
          </sky-layout-col>
          <sky-layout-col :span="6">
            <div class="grid-content bg-purple"></div>
          </sky-layout-col>
        </sky-layout-row>

        <sky-layout-row type="flex" justify="end">
          <sky-layout-col :span="6">
            <div class="grid-content bg-purple-light"></div>
          </sky-layout-col>
          <sky-layout-col :span="6">
            <div class="grid-content bg-purple"></div>
          </sky-layout-col>
        </sky-layout-row>

        <sky-layout-row type="flex" justify="space-between">
          <sky-layout-col :span="6">
            <div class="grid-content bg-purple-light"></div>
          </sky-layout-col>
          <sky-layout-col :span="6">
            <div class="grid-content bg-purple"></div>
          </sky-layout-col>
        </sky-layout-row>

        <sky-layout-row type="flex" justify="space-around">
          <sky-layout-col :span="6">
            <div class="grid-content bg-purple-light"></div>
          </sky-layout-col>
          <sky-layout-col :span="6">
            <div class="grid-content bg-purple"></div>
          </sky-layout-col>
        </sky-layout-row>

        <div class="container">

          <sky-layout-row type="flex" justify="space-between" align="middle">
            <sky-layout-col :span="6">
              <div class="grid-content bg-purple-light"></div>
            </sky-layout-col>
            <sky-layout-col :span="6">
              <div class="grid-content bg-purple-light"></div>
            </sky-layout-col>
            <sky-layout-col :span="6">
              <div class="grid-content bg-purple"></div>
            </sky-layout-col>
          </sky-layout-row>

        </div>

        <div class="container">

          <sky-layout-row type="flex" justify="space-between" align="bottom">
            <sky-layout-col :span="6">
              <div class="grid-content bg-purple-light"></div>
            </sky-layout-col>
            <sky-layout-col :span="6">
              <div class="grid-content bg-purple-light"></div>
            </sky-layout-col>
            <sky-layout-col :span="6">
              <div class="grid-content bg-purple"></div>
            </sky-layout-col>
          </sky-layout-row>

        </div>

      </div>
    </sky-card-panel>

    <SkyHiddenPanel title="代码">
      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="html">
              //flex 布局

              &lt;sky-layout-row type="flex"&gt;
                &lt;sky-layout-col :span="6"&gt;
                  &lt;div class="grid-content bg-purple-light"&gt;&lt;/div&gt;
                &lt;/sky-layout-col&gt;
                &lt;sky-layout-col :span="6"&gt;
                  &lt;div class="grid-content bg-purple"&gt;&lt;/div&gt;
                &lt;/sky-layout-col&gt;
              &lt;/sky-layout-row&gt;

              &lt;sky-layout-row type="flex" justify="center"&gt;
                &lt;sky-layout-col :span="6"&gt;
                  &lt;div class="grid-content bg-purple-light"&gt;&lt;/div&gt;
                &lt;/sky-layout-col&gt;
                &lt;sky-layout-col :span="6"&gt;
                  &lt;div class="grid-content bg-purple"&gt;&lt;/div&gt;
                &lt;/sky-layout-col&gt;
              &lt;/sky-layout-row&gt;

              &lt;sky-layout-row type="flex" justify="end"&gt;
                &lt;sky-layout-col :span="6"&gt;
                  &lt;div class="grid-content bg-purple-light"&gt;&lt;/div&gt;
                &lt;/sky-layout-col&gt;
                &lt;sky-layout-col :span="6"&gt;
                  &lt;div class="grid-content bg-purple"&gt;&lt;/div&gt;
                &lt;/sky-layout-col&gt;
              &lt;/sky-layout-row&gt;

              &lt;sky-layout-row type="flex" justify="space-between"&gt;
                &lt;sky-layout-col :span="6"&gt;
                  &lt;div class="grid-content bg-purple-light"&gt;&lt;/div&gt;
                &lt;/sky-layout-col&gt;
                &lt;sky-layout-col :span="6"&gt;
                  &lt;div class="grid-content bg-purple"&gt;&lt;/div&gt;
                &lt;/sky-layout-col&gt;
              &lt;/sky-layout-row&gt;

              &lt;sky-layout-row type="flex" justify="space-around"&gt;
                &lt;sky-layout-col :span="6"&gt;
                  &lt;div class="grid-content bg-purple-light"&gt;&lt;/div&gt;
                &lt;/sky-layout-col&gt;
                &lt;sky-layout-col :span="6"&gt;
                  &lt;div class="grid-content bg-purple"&gt;&lt;/div&gt;
                &lt;/sky-layout-col&gt;
              &lt;/sky-layout-row&gt;


                &lt;sky-layout-row type="flex" justify="space-between" align="middle"&gt;
                  &lt;sky-layout-col :span="6"&gt;
                    &lt;div class="grid-content bg-purple-light"&gt;&lt;/div&gt;
                  &lt;/sky-layout-col&gt;
                  &lt;sky-layout-col :span="6"&gt;
                    &lt;div class="grid-content bg-purple-light"&gt;&lt;/div&gt;
                  &lt;/sky-layout-col&gt;
                  &lt;sky-layout-col :span="6"&gt;
                    &lt;div class="grid-content bg-purple"&gt;&lt;/div&gt;
                  &lt;/sky-layout-col&gt;
                &lt;/sky-layout-row&gt;


                &lt;sky-layout-row type="flex" justify="space-between" align="bottom"&gt;
                  &lt;sky-layout-col :span="6"&gt;
                    &lt;div class="grid-content bg-purple-light"&gt;&lt;/div&gt;
                  &lt;/sky-layout-col&gt;
                  &lt;sky-layout-col :span="6"&gt;
                    &lt;div class="grid-content bg-purple-light"&gt;&lt;/div&gt;
                  &lt;/sky-layout-col&gt;
                  &lt;sky-layout-col :span="6"&gt;
                    &lt;div class="grid-content bg-purple"&gt;&lt;/div&gt;
                  &lt;/sky-layout-col&gt;
                &lt;/sky-layout-row&gt;

          </code>
      </pre>
      </div>
    </SkyHiddenPanel>

  </div>
</template>

<script>
</script>

<style lang="scss" scoped>
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.SkyLayoutRow {
  margin-bottom: 20px;
}

.container {
  height: 120px;
  background: pink;
  margin-bottom: 50px;
  .SkyLayoutRow {
    height: 100%;
  }
}
</style>